<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            float: left;
            margin-right: 20px;
            position: relative;
            overflow: hidden;
        }
        .title {
            position: absolute;
            bottom: 0;
            color: white;
            padding:0 10px;
            transform: translateY(30px);
            transition: all 1s;
            z-index: 2;
        }
        .title h5,.title h4 {
            margin: 0;
        }


        img {
            transition: all 1s;
        }
        .box:hover img {
            transform: scale(1.1);
            
        }

        a::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1;
            transition: all 1s;
        }
        a:hover::before {
            background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
            opacity: 1;
        }
        .box:hover .title {
            transform: translateY(0);
            s
        }
    </style>
</head>
<body>
    <a href="#" class="box">
      <img src="./images/pic1.png" alt="" />
      <div class="title">
        <h5>行业洞察</h5>
        <h4>迈向智能世界2030</h4>
        <p>了解更多<i class="iconfont icon-arrow-right"></i></p>
      </div>
    </a>

    <a href="#" class="box">
      <img src="./images/pic2.png" alt="" />
      <div class="title">
        <h5>产品</h5>
        <h4>OceanStor Pacific海量存储斩获2021 Interop金奖</h4>
        <p>了解更多<i class="iconfont icon-arrow-right"></i></p>
      </div>
    </a>

    <a href="#" class="box">
      <img src="./images/pic3.png" alt="" />
      <div class="title">
        <h5>《ICT新视界》刊首语</h5>
        <h4>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h4>
        <p>了解更多<i class="iconfont icon-arrow-right"></i></p>
      </div>
    </a>
  </body>
</html>